<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>01、vue的入门案例.html</title>
    <style>
        [v-cloak]{display: none}
    </style>
</head>
<body>
<!--第三步：指定vue从那个dom元素进行渲染和管理  ------------  view角色-->
<div id="app" v-cloak>
    <!--简单插值-->
    <h1>{{message}}</h1>
    <!--支持三目运行算-->
    <p>{{male == 0 ? "女" : "男"}}</p>
    <!--调用js函数-->
    <p>{{message.toUpperCase()}}</p>
    <p>{{message.split("").reverse().join("")}}</p>
    <!--也支持四则运算-->
    <p>{{money + num}}</p>
    <p>{{money - num}}</p>
    <p>{{money * num}}</p>
    <p>{{money / num}}</p>
    <p>{{money % num}}</p>

    <hr>
    <!--简单插值-->
    <h1 v-text="message"></h1>
    <!--支持三目运行算-->
    <p v-text="male == 0 ? '女' : '男'"></p>
    <!--调用js函数-->
    <p v-text="message.toUpperCase()"></p>
    <p v-text="message.split('').reverse().join('')"></p>
    <!--也支持四则运算-->
    <p v-text="money + num">{{}}</p>
    <p v-text="money - num">{{}}</p>
    <p v-text="money * num">{{}}</p>
    <p v-text="money / num">{{}}</p>
    <p v-text="money % num">{{}}</p>

    <hr>
    <div>{{html}}</div>
    <div v-text="html"></div>
    <div v-html="html"></div>

</div>
<!--第一步：引入vue.global.js文件-->
<script src="js/vue.min.js"></script>
<!--第二步：初始化一个vue实例-->
<script>
    //怎么去理解mvvm
    const vm = new Vue({//--------------vm角色
        el: "#app",
        // 数据模型
        data: {//------------------------model的角色
            message: "Hello Vue3.x",
            html:"<div><h1 style='color:red'>我是一个小可爱</h1></div>",
            money: 12.3,
            num: 11,
            male: 0
        }
    })
</script>
</body>
</html>